<template>
  <!--  =>  -->
  <div class="pages refund">
    <div class="pageLevel" v-if="!sub">
      <!-- 头部 -->
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form label-width="100px" class="demo-ruleForm" size="small">
          <el-form-item label="交易时间:" style="margin-left:10px">
            <el-date-picker :clearable="false" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label-width="100px" label="业务类型：" style="margin-left:0px">
            <el-select v-model="selectdata.type" size="small" @change="trade">
              <el-option label="全部" value=""></el-option>
              <el-option label="应收" value="1"></el-option>
              <el-option label="应付" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="90px" label="状态：" style="margin-left:0px">
            <el-select v-model="selectdata.paymentStatus" size="small">
              <el-option label="全部" value=""></el-option>
              <el-option v-if="selectdata.type==2||selectdata.type==''" label="部分支付" value="2"></el-option>
              <el-option v-if="selectdata.type==2||selectdata.type==''" label="已付" value="3"></el-option>
              <el-option v-if="selectdata.type==1||selectdata.type==''" label="部分收款" value="4"></el-option>
              <el-option v-if="selectdata.type==1||selectdata.type==''" label="已收" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="100px" label="企业名称:" style="margin-left:10px">
            <el-input class="input" v-model="selectdata.keyword" size="small" placeholder="请输入企业名称"></el-input>
          </el-form-item>
          <el-form-item label="" prop="wxser" class="wxelForm" label-width="25px">
            <el-button type="primary" @click="toPage" size="mini">查询</el-button>
          </el-form-item>
          <el-form-item label="" label-width="55px">
            <el-button type="primary" v-if="setRole('导出')" icon="el-icon-download" size="mini" @click="download" class="Button">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" label="序号" width="55" align="center" fixed></el-table-column>
          <el-table-column prop="orderNo" label="订单号" align="center" width="148" fixed>
            <template slot-scope="scope">
              <span v-if="scope.row.Tos=='应付'&&scope.row.bizTypeName=='采购付款'">{{scope.row.purchaseNo}}</span>
              <span v-if="scope.row.Tos=='应付'&&scope.row.bizTypeName=='退货付款'">{{scope.row.salesNo}}</span>
              <span v-if="scope.row.Tos=='应收'&&scope.row.bizTypeName=='销售收款'">{{scope.row.salesNo}}</span>
              <span v-if="scope.row.Tos=='应收'&&scope.row.bizTypeName=='退货收款'">{{scope.row.purchaseNo}}</span>
              <span></span>
            </template>
          </el-table-column>
          <el-table-column prop="payeeName" label="企业名称" align="center" width="100" fixed>
          </el-table-column>
          <el-table-column prop="Tos" label="业务类型" align="center" width="100">
          </el-table-column>
          <el-table-column prop="payment" label="状态" align="center" width="100">
          </el-table-column>
          <el-table-column prop="orderTime" label="订单时间" align="center" :formatter="trunTime" width="115">
          </el-table-column>
          <el-table-column prop="lastPayTime" label="交易时间" align="center" :formatter="trunTimes" width="160">
          </el-table-column>
          <el-table-column prop="bizTypeName" label="付款/收款类型" align="center">
          </el-table-column>
          <el-table-column prop="orderPrice" label="总金额" align="center">
          </el-table-column>
          <el-table-column prop="paidPrice" label="交易金额" align="center">
          </el-table-column>
          <el-table-column prop="lastPayType" label="支付方式" align="center" :formatter="lastPayType" width="140">
          </el-table-column>
          <el-table-column prop="remainingPrice" label="剩余金额" align="center">
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button size="small" type="text" v-if="setRole('详情')" class="addDetail" @click="routerPush(scope.row.url,scope.row.id,scope.row.paymentStatus)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import {
  findPayBillListReport,
  findByListBill,
  approvalReturn,
  preAccountList,
  findByListBillExport
} from "@/api";
import util from "@/util";
import s from "@/util/state";
import { mapState } from "vuex";
var fileDownload = require("js-file-download");
export default {
  computed: mapState(["merchantId", "sub", "power"]),
  data() {
    return {
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
        }
      },
      routePath: "",
      value: [],
      status: "",
      name: "",
      pageSize: 10,
      total: 0,
      currentPage: 1,
      selectdata: {
        keyword: "",
        paymentStatus: "",
        type: ""
      },
      tableData: [],
      options: [],
      sum: ""
    };
  },
  created() {
    this.getTime();
  },
  activated() {
    if (
      this.routePath ==
        "/financial-center/receivable-finance/finance-collect/details-collect" ||
      this.routePath ==
        "/financial-center/receivable-finance/finance-copeWith/details-payable"
    ) {
    } else {
      this.getTime();
      this.selectdata.keyword = "";
      this.selectdata.paymentStatus = "";
      this.selectdata.type = "";
      this.pageSize = 10;
      this.currentPage = 1;
      this.getdata(10, 1);
    }
  },
  watch: {
    $route(to, from) {
      this.routePath = from.path;
    }
  },
  mounted() {
    this.getdata(10, 1);
  },
  methods: {
    lastPayType: s.lastPayType,
    trade() {
      this.selectdata.paymentStatus = "";
    },
    trunTime(row, column, cellValue) {
      return util.foryear(cellValue);
      //+ " " + util.fortime(cellValue);
    },
    trunTimes(row, column, cellValue) {
      if (row.lastPayType == 1) {
        //线下支付 时间格式
        return util.foryear(cellValue);
      } else {
        return util.foryear(cellValue) + " " + util.fortime(cellValue);
      }
    },
    preAccountList() {
      let postdata = {
        payeeId: this.merchantId
      };
      preAccountList(postdata).then(res => {
        let a = {
          payerName: "全部",
          payerId: ""
        };
        res.data.unshift(a);
        this.options = res.data;
      });
    },
    approvalReturn(id, status) {
      let postdata = {
        returnId: id,
        status: status
      };
      approvalReturn(postdata).then(res => {
        if (res.code == 200) {
          this.getdata(this.pageSize, this.currentPage);
          this.$message({
            type: "success",
            message: res.data.msg
          });
        }
      });
    },
    reject(id) {
      this.$confirm("是否驳回退款申请?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.approvalReturn(id, 0);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消驳回退款申请"
          });
        });
    },
    agree(id) {
      this.$confirm("是否同意退款申请?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.approvalReturn(id, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消同意退款申请"
          });
        });
    },
    //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    //跳页
    toPage() {
      this.getdata(this.pageSize, 1);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getdata(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(this.pageSize, val);
    },
    getTime() {
      //---------------默认当前时间
      let date = new Date();
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      if (m >= 1 && m <= 9) {
        m = "0" + m;
      }
      if (d >= 1 && d <= 9) {
        d = "0" + d;
      }
      let time = y + "-" + m + "-" + d;
      this.$set(this.value, 0, time);
      this.$set(this.value, 1, time);
    },
    routerPush(name, id, type) {
      util.routerTo(name, {
        type: type,
        id: id
      });
    },
    formatTimes: function(row) {
      return util.foryear(row.createTime) + " " + util.fortime(row.createTime);
    },
    getdata(pageSize, pageNum) {
      if (!this.value) {
        this.value = ["", ""];
      }
      let postdata = {
        userId: this.merchantId,
        name: this.selectdata.keyword,
        type: this.selectdata.type,
        paymentStatus: this.selectdata.paymentStatus,
        startTime: this.value[0],
        endTime: this.value[1],
        pageNo: pageNum,
        pageSize: pageSize
      };
      findByListBill(postdata).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.merchantId == this.tableData[i].payerId) {
            this.tableData[i].Tos = "应付";
            this.tableData[i].url =
              "/financial-center/receivable-finance/finance-copeWith/details-payable";
            switch (this.tableData[i].paymentStatus) {
              case "0":
                this.tableData[i].payment = "未付";
                break;
              case "1":
                this.tableData[i].payment = "待确认";
                break;
              case "2":
                this.tableData[i].payment = "部分支付";
                break;
              case "3":
                this.tableData[i].payment = "已付";
                break;
              case "4":
                this.tableData[i].payment = "已付";
                break;
              case "9":
                this.tableData[i].payment = "已关闭";
                break;
              default:
            }
          } else if (this.merchantId == this.tableData[i].payeeId) {
            this.tableData[i].Tos = "应收";
            this.tableData[i].url =
              "/financial-center/receivable-finance/finance-collect/details-collect";
            switch (this.tableData[i].paymentStatus) {
              case "0":
                this.tableData[i].payment = "未收";
                break;
              case "1":
                this.tableData[i].payment = "待确认";
                break;
              case "2":
                this.tableData[i].payment = "部分收款";
                break;
              case "3":
                this.tableData[i].payment = "已收";
                break;
              case "4":
                this.tableData[i].payment = "已收";
                break;
              case "9":
                this.tableData[i].payment = "已关闭";
                break;
              default:
            }
          }
          // console.log(this.tableData[i].payment);
        }
      });
    },
    download() {
      let datas = {
        userId: this.merchantId,
        name: this.selectdata.keyword,
        type: this.selectdata.type,
        paymentStatus: this.selectdata.paymentStatus,
        startTime: this.value[0],
        endTime: this.value[1],
        pageNo: this.currentPage,
        pageSize: this.pageSize
      };
      if (this.tableData.length == 0) {
        this.$message({
          type: "error",
          message: "数据为空不能导出"
        });
      } else {
        findByListBillExport(datas)
          .then(res => {
            if (res.data == undefined) {
              let fileName = "应收应付-流水导出.xlsx";
              fileDownload(res, fileName);
            } else {
              this.$message(res.data.msg);
            }
          })
          .catch(e => {});
      }
    }
  }
};
</script>

<style  scoped>
.refund .el-input__inner {
  height: 32px;
  line-height: 32px;
}
#app {
  text-align: inherit;
}
.refund .total-income {
  color: #606266;
  width: 100%;
  line-height: 55px;
  margin: 20px 0px 10px 0px;
  border-bottom: 1px solid #eee;
}
.refund .total-income .all-income {
  margin-left: 30px;
}
.refund .total-income .all-income span {
  margin-left: 10px;
}
.refund .tableSearch .el-select {
  width: 140px;
}
.refund .span1 {
  color: red;
  margin-left: 100px;
  font-size: 14px;
  font-weight: bold;
}
.wxser {
  line-height: 50px;
  margin-left: 10px;
  height: 40px;
  width: 420px;
}
.wxser div {
  float: left;
  width: 200px;
}
.wxser .span-left {
  margin-left: 20px;
}
.tips {
  text-align: center;
  margin: 30px 30px 0px 30px;
}
</style>
